import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

let scene = new THREE.Scene();
let geometry = new THREE.BoxGeometry(100, 100, 100);
let material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
let pointL = new THREE.PointLight(0xffffff);
pointL.position.set(400, 300, 200);
scene.add(pointL);
let ambientL = new THREE.AmbientLight(0x444444);
scene.add(ambientL);

let width = window.innerWidth,
    height = window.innerHeight,
    k = width / height,
    s = 200;
let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(500, 300, 200);
camera.lookAt(scene.position);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);

document.body.appendChild(renderer.domElement);

function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

// 引入 OrbitControls.js 提供鼠标键盘控制能力
/**
 * 默认有三种控制方式：
 *  左键拖动————相机绕场景三维旋转
 *  中键滚动————缩放
 *  邮件拖动————在视窗内移动网格模型
 */
let controls = new OrbitControls(camera, renderer.domElement); // 创建一个控制对象
// controls.addEventListener('change', render); // 在控制对象上监听change事件，在使用 requestAnimationFrame 时无需监听